﻿<%@ Page Title="" Language="C#" MasterPageFile="~/masters/SecuredInterna.Master" AutoEventWireup="true" CodeBehind="informacionCreditos.aspx.cs" Inherits="BancoIdeal.secured.informacionCreditos" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitlePageSecured" runat="server">
    Información de mis créditos
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
	<script src="../scripts/util.js" type="text/javascript"></script>
    <script type="text/javascript">
    	var dirProductos = "/WS/Productos.asmx";
    	$( function () {
    		loadingModal();
    		LlamadoAjax( "{ idCliente: " + idCliente + " }", dirProductos, 'GetProductosColocacion', OnErrorCall, OnSuccessCallGetProductosColocacion );
    	} );

    	function OnErrorCall( response ) {
    		alert( response.status + " " + response.statusText );
    	}

    	function GetStyleInformacion( idProducto ) {
    		switch ( parseInt( idProducto ) ) {
    			case 3:
    				return "invertido-creditolibre-55px";
    			case 4:
    				return "invertido-creditovivienda-55px";
    			case 5:
    				return "invertido-creditovehiculo-55px";
    			case 9:
    				return "invertido-creditomaster-55px";
    			case 10:
    				return "invertido-creditovisa-55px";
    			case 11:
    				return "invertido-creditoAMEX-55px";
    			case 12:
    				return "invertido-creditolibre-55px";
    			case 13:
    				return "invertido-creditoestudio-55px";
    			case 14:
    				return "invertido-creditoviajes-55px";
    			case 15:
    				return "invertido-creditomicro-55px";
    			default:
    				return "invertido-creditolibre-55px";
    		}
    	}

    	function OnSuccessCallGetProductosColocacion( response ) {
    		response = eval( "( " + response.d + " )" );
    		for ( var i = 0; i < response.length; i++ ) {
    			$( "#informacionCreditos" ).append( '<div class="productoVinculado" id="productoVinculado' + i + '"><div class="producto_55px"><span class="' + GetStyleInformacion( response[i].IdProducto ) + ' icono-propiedades-55px displayB"></span></div><span ><span class="textoColor paddingSup30 displayB">' + response[i].NombreProductoCliente + '</span></span></div>' );
    			$( '#productoVinculado' + i ).click( { response: response[i] }, clickCreditoLink );
    		}
    		ScrollToolFun();
    		$('.cargandoModal' ).dialog( 'close' );
    	}

    	function clickCreditoLink( event ) {
    	    loadingModal();
    	    var html = '<h1><span class="icono iconoSolicitudes48x"><div class="producto_55px"><span class="' + GetStyleInformacion( event.data.response.IdProducto ) + ' icono-propiedades-55px displayB"></span></div></span><span class="fondoAdicional"><span class="estiloTexto" > ' + event.data.response.NombreProductoCliente + '</span></span></h1><div class="detalleProductoScroll"><div class="infoCompletaProducto"></div><div class="formularioProductos"><table class="tablaProductos" width="100%" border="0" cellspacing="0" cellpadding="0">';
    	    switch ( parseInt( event.data.response.IdProducto ) ) {
    	        case 3:
    	        case 4:
    	        case 5:
    	        case 12:
    	        case 13:
    	        case 14:
    	        case 15:
    	            html = html + '<tr><td width="35%" class="labelsModal">Tipo de credito</td><td width="65%"><span class="datoCliente">' + event.data.response.NombreProducto + '</span></td></tr><tr><td width="35%" class="labelsModal">Interés:</td><td width="65%"><span class="datoCliente">' + ( parseFloat( event.data.response.TasaInteres ) * 100 ).toFixed( 2 ) + '%</span></td>';
    	            html = html + '</tr><tr><td width="35%" class="labelsModal">Fecha de terminacion:</td><td width="65%"><span class="datoCliente">' + eval( event.data.response.FechaFin.replace( /\/Date\((\d+)\)\//gi, "new Date($1)" ) ).toLocaleDateString() + '</span></td></tr><tr><td width="35%" class="labelsModal">Valor Credito:</td><td width="65%"><span class="datoCliente">$' + event.data.response.ValorAprobadoCadena + '</span>';
    	            html = html + '</td></tr><tr><td class="labelsModal">Fecha de pago:</td><td><span class="datoCliente">' + ( new Date() ).toLocaleDateString() + '</span></td></tr><tr><td class="labelsModal">Débito automático:</td><td id="productos"><table width="100%" border="0" cellspacing="0" cellpadding="0">';
    	            html = html + '<tr><td width="15%"><div class="RadioButtonContainer"><div class="checkBoxChecked"></div><span class="datoCliente">Si</span></div></td></tr></table></td></tr><tr><td width="35%" class="labelsModal">Plazo:</td><td width="65%"><span class="datoCliente">' + event.data.response.Periodos + ' meses</span></td>';
    	            html = html + '</tr><tr><td width="35%" class="labelsModal">Valor Cuota:</td><td width="65%"><span class="datoCliente">$' + event.data.response.Cuota + '</span></td></tr></table></div></div>';
    	            break
    	        case 9:
    	        case 10:
    	        case 11:
    	            html = html + '<tr><td width="35%" class="labelsModal">Franquicia:</td><td width="65%"><span class="datoCliente">' + event.data.response.NombreProducto + '</span></td></tr><tr><td width="35%" class="labelsModal">Interés:</td><td width="65%"><span class="datoCliente">' + ( parseFloat( event.data.response.TasaInteres ) * 100 ).toFixed( 2 ) + '%</span></td>';
    	            html = html + '</tr><tr><td width="35%" class="labelsModal">Fecha de vencimiento:</td><td width="65%"><span class="datoCliente">' + eval( event.data.response.FechaFin.replace( /\/Date\((\d+)\)\//gi, "new Date($1)" ) ).toLocaleDateString() + '</span></td></tr><tr><td width="35%" class="labelsModal">Valor Cupo:</td><td width="65%"><span class="datoCliente">$' + event.data.response.ValorAprobadoCadena + '</span>';
    	            html = html + '</td></tr><tr><td class="labelsModal">Fecha de pago:</td><td><span class="datoCliente">' + ( new Date() ).toLocaleDateString() + '</span></td></tr><tr><td class="labelsModal">Débito automático:</td><td id="productos"><table width="100%" border="0" cellspacing="0" cellpadding="0">';
    	            html = html + '<tr><td width="15%"><div class="RadioButtonContainer"><div class="checkBoxChecked"></div><span class="datoCliente">Si</span></div></td></tr></table></td></tr><tr><td width="35%" class="labelsModal">Plazo:</td><td width="65%"><span class="datoCliente">' + event.data.response.Periodos + ' meses</span></td>';
    	            html = html + '</tr><tr><td width="35%" class="labelsModal">Valor Cuota:</td><td width="65%"><span class="datoCliente">$' + event.data.response.Cuota + '</span></td></tr><tr><td width="35%" class="labelsModal">Cupo disponible:</td><td width="65%"><span class="datoCliente">$' + event.data.response.CupoDisponible + '</span></td></tr></table></div></div>';
    	            break

    	    }
    	    $( "#detalleProducto" ).html( html );
    	    $( '.cargandoModal' ).dialog( 'close' );
    	}
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="SectionIcon" runat="server">
    <span class="icono iconoCreditos48x">
                    	&nbsp;
                    </span>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="SectionTitle" runat="server">
    Créditos
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="InfoScreen" runat="server">
    En el espacio de la derecha podrás ver la información detallada de los productos que hacen parte de tu portafolio de créditos.
    Primero, debes seleccionar uno de tus créditos en la lista de la izquierda.
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="MoreInfoScreen" runat="server">
    <a href="#" class="verMasInfo">
                	<span>
                    	<span>
                        	Ver más información
                        </span>
                    </span>
                </a>
</asp:Content>
<asp:Content ID="Content8" ContentPlaceHolderID="SectionOptions" runat="server">
    <ul>
                	<li>
                        <a href="Creditos.aspx" class="opcionSeccion">
                            <span class="icono creditos">
                                &nbsp;
                            </span>
                            <span class="fondoAdicional">
                                <span class="estiloTexto">
                                    Mis créditos
                                </span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="HistoricoPagosCreditos.aspx" class="opcionSeccion">
                            <span class="icono creditos">
                                &nbsp;
                            </span>
                            <span class="fondoAdicional">
                                <span class="estiloTexto">
                                    Histórico de pagos de créditos
                                </span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="organizarCreditos.aspx" class="opcionSeccion">
                            <span class="icono organizar">
                                &nbsp;
                            </span>
                            <span class="fondoAdicional">
                                <span class="estiloTexto">
                                    Organizar créditos
                                </span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="pagosCreditos.aspx" class="opcionSeccion">
                            <span class="icono pagos">
                                &nbsp;
                            </span>
                            <span class="fondoAdicional">
                                <span class="estiloTexto">
                                    Pagar mis créditos
                                </span>
                            </span>
                        </a>
                    </li>
                </ul>
</asp:Content>
<asp:Content ID="Content9" ContentPlaceHolderID="TitleSubSectionPanorama" runat="server">
    Mi portafolio activo
</asp:Content>
<asp:Content ID="Content10" ContentPlaceHolderID="OpcionesTileHorizontal" runat="server">
</asp:Content>
<asp:Content ID="Content11" ContentPlaceHolderID="MainContent" runat="server">
<div class="paginaInfoCreditos">
                
                    <div id="cuentaActivaProductos">
                        <div id="infoCuentaMovimientos">
                              <span><span>Este es el portafolio de productos vinculados a su cuenta:</span></span>
                        </div>
                        <div id="cuentasCarrusel" class="carruselMovimientos borderRightDotted">
                            <img src="images/topdiagonal12px.gif" class="diagonalimg"/>
                            <div id="botonUp">
                                  <a href="#"><span class="ocultar">subir</span></a>
                            </div>
                            
                            <div id="informacionCreditos">                                    
                            </div>
        					<img src="images/bottomdiagonal12px.gif" class="diagonalbottomimg"/>
                            <div id="botonDown">
                                
                                <a href="#"><span class="ocultar">bajar</span></a>
                            </div>
                            
                        </div>
                    </div>
              
                    <div class="detalleProducto" id="detalleProducto">                        
                    </div>
        </div>
</asp:Content>
<asp:Content ID="Content12" ContentPlaceHolderID="FooterWebPage" runat="server">
</asp:Content>
<asp:Content ID="Content13" ContentPlaceHolderID="VentanasEmergentes" runat="server">
</asp:Content>
